This PR introduces a modern, accessible form creation component built with the Vue.js framework (referred to as "Vyesjs" in the requirements) that provides a clean interface for collecting user input with two fields: Name (required) and Description (optional).

Features Implemented

Core Functionality

• Vue.js 3 Component: Built with Composition API and script setup syntax for reactive data management
• Two Form Fields:
  • Name field (required text input with validation)
  • Description field (optional textarea with unlimited length)
• Real-time Validation: Immediate feedback with user-friendly error messages
• Form Submission: Emits data to parent component using $emit when successfully submitted

Design & UX

• Modern UI: Clean, professional design with consistent spacing and typography
• Responsive Design: Mobile-first approach that works on all screen sizes
• Smooth Animations: Loading states, error transitions, and hover effects
• Visual Hierarchy: Clear indicators for required vs optional fields
• Form States: Proper visual feedback for focus, error, and success states

Accessibility Features

• ARIA Support: Full screen reader compatibility with proper labels and descriptions
• Keyboard Navigation: Complete keyboard accessibility with focus management
• High Contrast: Supports high contrast mode preferences
• Reduced Motion: Respects user motion preferences
• Semantic HTML: Proper HTML5 structure with form semantics

Technical Implementation

• CSS Custom Properties: Easy theming with CSS variables
• Dark Mode: Automatic dark mode support based on system preferences
• No External Dependencies: Self-contained component (except Vue.js)
• Form Validation: Client-side validation with proper error handling
• State Management: Reactive form state with automatic updates

Usage Example

<template>
  <FormCreator 
    @submit="handleFormSubmit"
    @change="handleFormChange"
  />
</template>

<script setup>
import FormCreator from './components/FormCreator.vue'

const handleFormSubmit = (data) => {
  console.log('Form submitted:', data)
  // Example: webapi.Post('/api/items', { json: data })
}

const handleFormChange = (data) => {
  console.log('Form state:', data.isValid)
}
</script>

Files Added

• frontend/components/FormCreator.vue - Main Vue.js component
• frontend/demo.html - Interactive Vue.js demo with CDN
• frontend/standalone-demo.html - Standalone demo without external dependencies
• frontend/README.md - Comprehensive documentation with usage examples
• frontend/package.json - Package configuration and metadata

Validation Rules

• Name Field: Required, minimum 2 characters, maximum 100 characters
• Description Field: Optional with no length restrictions
• Real-time Feedback: Errors appear on blur, clear on input
• Submit Prevention: Button disabled until form is valid

Integration with OneBD

The component is designed to work seamlessly with OneBD-generated API clients:

const handleFormSubmit = async (data) => {
  try {
    const result = await webapi.Post('/api/items', { json: data })
    console.log('Item created:', result)
  } catch (error) {
    console.error('Failed to create item:', error)
  }
}

Demo Screenshots

The component demonstrates modern web development practices with clean code, comprehensive documentation, and thorough testing through the interactive demos.

This pull request was created as a result of the following prompt from Copilot chat.

Create a modern, beautiful form creation component using the Vyesjs framework that collects two fields:

• Name (string) - required field
• Description (string) - optional field with textarea

Requirements:

1. Follow Vyesjs framework specifications with proper HTML5 structure
2. Use modern, clean design with good visual hierarchy
3. Include proper form validation for required fields
4. Responsive design that works on different screen sizes
5. Smooth animations and transitions for better UX
6. Clear visual feedback for form states (focus, error, success)
7. Support form submission that emits data to parent component
8. Include proper accessibility features

The component should:

• Have a clean, professional appearance
• Use consistent spacing and typography
• Provide clear visual indicators for required vs optional fields
• Include hover and focus states for interactive elements
• Show validation errors in a user-friendly way
• Have a submit button that triggers form validation
• Emit form data using $emit when successfully submitted

Technical specifications:

• Use Vyesjs framework syntax with script setup for reactive data
• Implement proper CSS styling within style tags
• Use responsive design principles
• Include proper form validation logic
• Follow the provided HTML structure guidelines

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.